<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>我的优惠券</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		/* .couponwraper>div {
			width: 17.95rem;
			height: 4.3rem;
			margin-bottom: 0.5rem;
			display: flex;
		}

		.coupon_left {
			width: 11.85rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			border-top-right-radius: 0.4rem;
			border-bottom-right-radius: 0.4rem;
			position: relative;
		}

		.border_left {
			width: 0.25rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			position: absolute;
			left: 0;
		}

		.coupon_right {
			width: 6.05rem;
			height: 100%;
			border-top-left-radius: 0.4rem;
			border-bottom-left-radius: 0.4rem;
			border-top-right-radius: 0.4rem;
			border-bottom-right-radius: 0.4rem;
			background: #ffffff;
		}

		.btn_use {
			width: 4rem;
			height: 1.5rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0.78rem;
			height: 1.5rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0.78rem;
			line-height: 1.5rem;
			text-align: center;
			font-size: 0.7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		} */

		body {
			background: #ffffff;
			padding: 0.1rem 0.06rem 0 0.11rem;
		}

		.item-wraper {
			width: 3.58rem;
			height: 1.28rem;
			background-size: cover;
			position: relative;
		}

		.item-wraper .item-left {
			position: absolute;
			left: 0.13rem;
			top: 0.38rem;
		}

		.item-wraper .item-left .left-top {
			margin-bottom: 0.09rem;
			text-align: center;
		}

		.item-wraper .item-left .left-top .money-icon {
			font-size: 0.14rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.14rem;
		}

		.item-wraper .item-left .left-top .money {
			font-size: 0.25rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.25rem;
		}

		.item-wraper .item-left .left-bottom {
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 0.12rem;
			text-align: center;
		}

		.item-wraper .item-left .left-bottom span {
			display: inline-block;
		}

		.item-wraper .item-right {
			position: absolute;
			left: 1.1rem;
			top: 0.43rem;
		}

		.item-wraper .item-right .right-top {
			font-size: 0.18rem;
			font-weight: 400;
			color: rgba(46, 46, 46, 1);
			line-height: 0.18rem;
			margin-bottom: 0.11rem;
		}

		.item-wraper .item-right .right-bottom {
			display: flex;
			align-items: center;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(127, 127, 127, 1);
			line-height: 0.12rem;
		}

		.item-wraper .item-right .right-bottom img {
			margin-left: 0.33rem;
			width: 0.16rem;
			height: 0.16rem;
		}

		.use-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(0, 90, 147, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(227, 244, 255, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(0, 90, 147, 1);
		}

		.overdue-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(89, 89, 89, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(240, 241, 242, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(89, 89, 89, 1);
		}
		.title{
			width: 75px;
			height: 25px;
			font-size: 25px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			/*line-height: 25px;*/
			text-align: center;
			vertical-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="item-wraper" :style="{backgroundImage:vo.status_name == '已过期' ? 'url('+overdue+')' : 'url('+coupon+')'}" v-for="(vo,index) in info" :key="index">
			<div class="item-left" v-if="vo.coupon_temp_id==2">
				<div class="title">
					<!-- <span class="money-icon">￥</span> -->
					<span class="title" v-text="vo.coupon_type"></span>
				</div>
				<div class="left-bottom">
					<!-- <span>满¥{{vo.full_money}}可用</span> -->
				</div>
			</div>
			<div class="item-left" v-else>
				<div class="left-top">
					<span class="money-icon">￥</span>
					<span class="money">{{price_format('yuan',vo.money)}}.{{price_format('fen',vo.money)}}</span>
				</div>
				<div class="left-bottom">
					<span>满¥{{price_format('yuan',vo.full_money)}}.{{price_format('fen',vo.full_money)}}可用</span>
				</div>
			</div>
			<div class="item-right">
				<div class="right-top" v-text="vo.name"></div>
				<div class="right-bottom">
					<div>有效期 {{vo.start_time}}-{{vo.end_time}}</div>
					<!-- <img @click="choose(index,vo.id)" v-if="vo.status_name == '未使用'" :src="choose_num == index ? circle_active : circle_null" alt /> -->
				</div>
			</div>
			<!-- 使用或已过期按钮 -->
			<div class="overdue-btn" v-if="vo.status_name == '已过期'">已过期</div>
			<div class="use-btn" v-else onclick="openWin_goods_list_type('all')">去使用</div>
		</div>
		<!-- 缺省页面 -->
		<div class="aui-text-center" v-if="info.length < 1" style="margin-top: 1.04rem;" tapmode>
			<img src="../../image/bg/bg-nonecar.png" style="width:1.51rem;margin-left:50%;transform:translateX(-50%);" />
			<div style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
				暂无数据
			</div>
		</div>
	</div>
	<!-- <div id="app" style="padding:0.5rem 0.4rem">
		<div class="couponwraper" v-for="vo in info">
			<div class="" v-if="vo.status_name=='未使用'"> -->
	<!--未使用的优惠券  -->
	<!-- <div class="coupon_left" style="background: rgba(255, 255, 255, 1);"> -->
	<!-- 左边框 -->
	<!-- <div class="border_left">

					</div>
					<div class="" style="height:3.5rem;display:flex;align-items:center;margin-left:1.05rem;border-right:1px dashed #EDEDF0;margin-top:0.4rem;"> -->
	<!-- 中间包邮字样 -->
	<!-- <div class="" style="font-size:1.1rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(114,213,239,1);margin-right:1.2rem;">
							{{vo.coupon_type}}
						</div> -->
	<!-- 优惠券信息 -->
	<!-- <div class="">
							<div style="font-size:0.7rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(51,51,51,1);line-height:1rem;margin-bottom:0.2rem;">{{vo.name}}</div>
							<div style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:#9399A5;line-height:0.85rem;">{{vo.start_time}}-{{vo.end_time}}</div>
						</div>

					</div>

				</div> -->
	<!--  -->
	<!-- <div class="coupon_right" style="display:flex;justify-content:center;align-items:center">
					<div class="btn_use" tapmode onclick="openWin_goods_list_type('all')" style="">
						去使用
					</div>
				</div>
			</div>

			<div class="" v-if="vo.status_name=='已过期'"> -->
	<!--未使用的优惠券  -->
	<!-- <div class="coupon_left" style="background: rgba(255, 255, 255, 1);"> -->
	<!-- 左边框 -->
	<!-- <div class="border_left" style="background:#C9CACA">

					</div>
					<div class="" style="height:3.5rem;display:flex;align-items:center;margin-left:1.05rem;border-right:1px dashed #EDEDF0;margin-top:0.4rem;">
						中间包邮字样 -->
	<!-- <div class="" style="font-size:1.1rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(114,213,239,1);margin-right:1.2rem;color:rgba(201,202,202,1);">
							{{vo.coupon_type}}
						</div> -->
	<!-- 优惠券信息 -->
	<!-- <div class="">
							<div style="font-size:0.7rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(51,51,51,1);line-height:1rem;margin-bottom:0.2rem;color:rgba(201,202,202,1);">{{vo.name}}</div>
							<div style="font-size:0.6rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(114,213,239,1);line-height:0.85rem;color:rgba(201,202,202,1);">{{vo.start_time}}-{{vo.end_time}}</div>
						</div>

					</div>

				</div> -->
	<!--  -->
	<!-- <div class="coupon_right" style="display:flex;justify-content:center;align-items:center">
					<div v-if="vo.status_name=='已过期'" class="btn_use" tapmode onclick="openWin_goods_list_type('all')" style="background:rgba(238,238,238,1);">
						已过期
					</div>
					<div v-if="vo.status_name=='已使用'" class="btn_use" tapmode onclick="openWin_goods_list_type('all')" style="background:rgba(238,238,238,1);">
						已过期
					</div>
				</div>
			</div>

		</div> -->
	<!--
		<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
			<img src="../../image/bg/bg-nomessage.png" style="width:7.55rem;margin-left:50%;transform:translateX(-50%);" />
			<div class="aui-font-size-16 ming-text-hui6 aui-margin-t-10" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
				暂无优惠券
			</div>
		</div>


	</div> -->

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			info: [],
			coupon: "../../image/icons/coupon-bc.png",
			overdue: "../../image/icons/overdue-bc.png"
		},
		methods: {

				price_format: function(type, price) {
					var status = (price + '').indexOf('.')
					if (status == '-1') {
						if (type == 'yuan') {
							return price;
						}
						if (type == 'fen') {
							return '00';
						}
					}
					var price_array = (price + '').split('.')
					if (type == 'yuan') {
						return price_array[0];
					}
					if (type == 'fen') {
						var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
						return price_fen;
					}
				},
			get_list: function() {
				get_data('api/Coupon/couponList', {
					token: $api.getStorage('token')
				}, function(ret) {
					// alert(JSON.stringify(ret,null,2))
					if (ret.status) {
						vm.info = ret.data

					}
				})
			}
		}
	})
	apiready = function() {
		vm.get_list()
		fnInitPullRefresh(function(ret) {
				vm.get_list()
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
	};
</script>

</html>
